<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程成绩表</title>
    <style>
        table {
            border: 1px solid black;
            /*去除单元格边框外边距*/
            border-collapse: collapse;
        }

        td, th {
            border: 1px solid black;
            width: 100px;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <caption>课程成绩表</caption>
        <thead>
        <tr>
            <th>课程</th>
            <th>成绩</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!--是数据真正显示的区域-->
        <!--v-for用于遍历我们在vue实例中定义的数据，
        使用(item,index) in XXX 语法，其中item用于接收每一次遍历获取的元素对象，
        index表示每次获取的元素下标-->
        <tr v-for="(item,index) in subjectList">
            <td>{{item.subject}}</td>
            <td>{{item.score}}</td>
            <td>
                <!--v-on指令，用于给标签元素绑定事件，
                如果不使用v-on绑定事件，就无法调用vue实例中的任何内容-->
                <button v-on:click="delData(index)">删除</button>
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>总得分</td>
            <td colspan="2">{{totalScore}}</td>
        </tr>
        </tfoot>
    </table>
    <br/><br/>
    <label>
        课程名:<input type="text" id="subjectIn" v-model="subject"> <br/>
        成绩:<input type="text" id="scoreIn" v-model="score"> <br/>
    </label>
    <button id="add" v-on:click="addData()">新增</button>
    <button id="reset">重置表格</button>
</div>
</body>
<!--引入vue.js依赖 就是别人写好的js代码-->
<script src="js/vue.js"></script>
<script>
    /*编写使用vue操作和实现界面*/
    const app = new Vue({
        /* #app 就是id选择器，此处的el表示vue实例要挂载的视图元素区域在哪里*/
        el: '#app',
        /*设定当前页面需要使用的数据变量*/
        data: {
            subject: '',
            score: '',
            subjectList: []
        },
        methods: {
            addData() {
                this.subjectList.push({
                    subject: this.subject,
                    score: Number.parseInt(this.score)
                });
                // 清空输入框
                this.subject = '';
                this.score = ''
            },
            delData(index) {
                // 根据下标删除数组中对应的元素
                // 数组中的splice(startIndex,deleteCount)可以用于删除数组中的元素
                // 可以指定从哪一个下标开始，删除几个元素；
                // 当前代码表示为删除指定下标的元素
                this.subjectList.splice(index, 1);
            }
        },
        // computed 计算属性，会监测内部用于计算的元素的变化，
        // 如果内部元素发生变化，那么就会重新计算该结果
        computed: {
            totalScore() {
                return this.subjectList
                    .reduce((sum, ss) => ss.score + sum, 0);
            }
        }
    });
</script>
</html>